<template>
  <el-dialog
    title="详情"
    :visible.sync="dialogVisible"
    :show="show"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    append-to-body
    width="800px"
    :before-close="handleClose"
    @open="open"
  >
    <el-form
      ref="form"
      v-loading="infoLoading"
      :model="info"
      label-width="100px"
    >
      <el-scrollbar
        ref="myScrollbar"
        :wrap-class="{ wrapClass: true }"
        class="form-scrollbar"
      >
        <div class="el-dialog-div">
          <el-form-item label="发布时间">
            {{ info.releaseTime }}
          </el-form-item>
          <el-form-item label="到期时间">
            {{ info.expireTime }}
          </el-form-item>
          <el-form-item label="国家">
            {{ info.country }}
          </el-form-item>
          <el-form-item label="国旗">
            {{ info.countryFlag }}
          </el-form-item>
          <el-form-item label="图片">
            <div>
              <el-image
                style="height: 100px ;margin:10px"
                v-for="item in info.image"
                :key="item.url"
                :src="item.url"
              >
                <div slot="error" class="image-slot">
                  <i class="el-icon-picture-outline"></i>
                </div>
              </el-image>
            </div>
          </el-form-item>
          <el-form-item label="链接">
            <el-link type="primary" target="_blank" :href="info.urlLink">{{info.urlLink}}</el-link>
          </el-form-item>
          <el-form-item label="需求量">
            {{ info.requireQuantity }}
          </el-form-item>
          <el-form-item label="地址">
            {{ info.address }}
          </el-form-item>
          <el-form-item label="联系方式">
            {{ info.contacts }}
          </el-form-item>
          <el-form-item label="邮箱">
            {{ info.mailbox }}
          </el-form-item>
          <el-form-item label="微信">
            {{ info.wechat }}
          </el-form-item>
          <el-form-item label="电话">
            {{ info.phone }}
          </el-form-item>
          <el-form-item label="详情">
            <div>{{ info.details }}</div>
          </el-form-item>
          <el-form-item label="分类群">
            {{ info.categoryStubs }}
          </el-form-item>
        </div>
      </el-scrollbar>
    </el-form>
  </el-dialog>
</template>

<script>
export default {
  name: "info",
  props: {
    show: {
      type: Boolean,
      default: false,
    },
    rowData: {
      type: Object,
      // 对象或数组默认值必须从一个工厂函数获取
      default: function () {
        return {};
      },
    },
  },
  data() {
    return {
      dialogVisible: this.show,
      // 页面元素
      info: {},
      infoLoading: true,
    };
  },

  watch: {
    show() {
      this.dialogVisible = this.show;
      this.initForm = true;
    },
  },
  methods: {
    async open() {
      this.infoLoading = true;
      this.info = this.rowData;
      console.log();
      this.info.image = JSON.parse(this.rowData.image);
      this.infoLoading = false;
    },
    handleClose(done) {
      this.$emit("update:show", false);
      this.$emit("closeAction");
    },
  },
};
</script>

<style scoped>
</style>
